<template>
  <!-- 我的收藏 -->
  <div class="box">
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="20"></ceList>
      <div class="con">
        <div class="one-tab no-padding">
          <div class="one-tab-left">
            <div
              class="one-tab-item "
              :class="leibie == 1 ? 'active' : ''"
              @click="leibieClick(1)"
            >
              我收到的
            </div>
            <div
              class="one-tab-item "
              :class="leibie == 2 ? 'active' : ''"
              @click="leibieClick(2)"
            >
              我发起的
            </div>
          </div>
          <div class="one-tab-right"></div>
        </div>
        <!-- <div class="leibie">
          <div class="anniu">
            <div :class="leibie == 1 ? 'xuan' : ''" @click="leibieClick(1)">
              我收到的
            </div>
            <div :class="leibie == 2 ? 'xuan' : ''" @click="leibieClick(2)">
              我发起的
            </div>
          </div>
        </div> -->
        <div v-if="leibie == 1">
          <div class="report">
            <div class="report_item" v-for="item in list" :key="item.id">
              <div class="report_item_left">
                <div>
                  {{
                    item.businessType == 1
                      ? "举报房源"
                      : item.businessType == 2
                      ? "举报车源"
                      : item.businessType == 4
                      ? item.reportCategory == 4
                        ? "举报招聘"
                        : "举报简历"
                      : "举报用户"
                  }}：
                  {{
                    item.businessType != 3
                      ? item.title
                      : item.remarks || "未命名用户"
                  }}
                </div>

                <div>
                  举报原因：
                  <template v-if="item.businessType != 3">
                    {{ item.reportType.split("|").join(",") }}({{
                      item.reportContent
                    }})
                  </template>
                  <template v-else>
                    {{ item.reportType }}{{ item.reportContent }}
                  </template>
                </div>

                <div>举报时间：{{ item.createDate }}</div>
                <div v-if="item.image && item.image.length > 0">
                  举报图片：
                  <div class="report-img-wrap">
                    <img
                      :src="eim"
                      v-for="(eim, index) in item.image"
                      :key="index"
                      class="report-img"
                      style="width: 100px;max-height:margin-right: 10px;"
                      @click.stop="preView(index, item)"
                    />
                  </div>
                </div>
                <div
                  class="jiedao"
                  style="margin-top: 20rpx;"
                  v-if="item.informantReplied || item.informantReply"
                >
                  <span class="titles" style="width: 240rpx;">管理员回复：</span
                  ><span class="titless">{{
                    item.informantReplied || item.informantReply || ""
                  }}</span>
                </div>
                <div class="jiedao" v-if="item.repliedTime || item.replyTime">
                  <span class="titles">回复时间：</span
                  ><span class="titless">{{
                    item.repliedTime || item.replyTime || ""
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="leibie == 2">
          <div class="report">
            <div class="report_item" v-for="item in list" :key="item.id">
              <div class="report_item_left">
                <div>
                  {{ item.businessType == 1
                      ? "举报房源"
                      : item.businessType == 2
                      ? "举报车源"
                      : item.businessType == 4
                      ? item.reportCategory == 4
                        ? "举报招聘"
                        : "举报简历"
                      : "举报用户" }}：{{
                    item.title
                  }}
                </div>
                <div>
                  举报原因：{{ item.reportType }}({{ item.reportContent }})
                </div>
                <div
                  style="width:100%;display:flex;justify-content: space-between;position: relative;"
                >
                  举报状态：{{
                    item.auditStatus == "1"
                      ? "待审核"
                      : item.auditStatus == "2"
                      ? "已通过"
                      : item.auditStatus == "4"
                      ? "已拒绝"
                      : "已撤销"
                  }}
                  <div class="withdraw">
                    <div class="withdraw_item" @click="withdrawReport(item.id)">
                      撤回
                    </div>
                  </div>
                </div>
                <div>举报时间：{{ item.createDate }}</div>
                <div v-if="item.image && item.image.length > 0">
                  举报图片：
                  <div class="report-img-wrap">
                    <img
                      :src="eim"
                      v-for="(eim, index) in item.image"
                      :key="index"
                      class="report-img"
                      style="width: 100px;max-height: 100px;margin-right: 10px;"
                      @click.stop="preView(index, item)"
                    />
                  </div>
                </div>
                <div
                  class="jiedao"
                  style="margin-top: 20rpx;"
                  v-if="item.informantReply && item.informantReply != ''"
                >
                  <span class="titles" style="width: 240rpx;">管理员回复：</span
                  ><span class="titless">{{ item.informantReply }}</span>
                </div>
                <div
                  class="jiedao"
                  v-if="item.replyTime && item.replyTime != ''"
                >
                  <span class="titles">回复时间：</span
                  ><span class="titless">{{ item.replyTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="li"
          v-if="collectTotal == 0"
          style="width: 100%; height: 400px"
        >
          <el-empty
            :description="
              leibie == 1 ? '还没收到任何举报呢' : '还没发起任何举报呢'
            "
          ></el-empty>
        </div>

        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="collectTotal"
            :current-page="collectPage.pageNo"
            :page-size="collectPage.pageSize"
            @current-change="CollectCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <floor></floor>
    <chat ref="chats"></chat>
  </div>
</template>
<script>
import floor from "../../../components/floor";
import heads from "../../../components/head";
import ceList from "../../../components/ceList.vue";
import titlesearch from "../../../components/titlesearch.vue";
import chat from "../../../components/chat.vue";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
    chat
  },
  data() {
    return {
      leibie: 1,
      collectPage: {
        pageSize: 3,
        pageNo: 1,
        userId: ""
      },
      collectList: [],
      collectTotal: 0,
      list: [{}]
    };
  },
  created() {
    this.getUser();
    this.checkLogin(false, this.getMoreData);
  },
  methods: {
    withdrawReport(id) {
      if (this.withdrawLoading) {
        return;
      }
      this.$confirm("确定撤回此举报吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.withdrawLoading = true;
          this.$postHttp("/mob/user/withdrawReport", {
            id,
            userId: localStorage.getItem("userInfo")
              ? JSON.parse(localStorage.getItem("userInfo")).id
              : ""
          }).then(data => {
            if (data.code == 200) {
              this.mySuccessMessage(data.msg);
              this.getMyReportRecord();
            }
          });
        })
        .catch(() => {});
    },
    preView(index, item) {
      this.$hevueImgPreview({
        multiple: true,
        nowImgIndex: index,
        imgList: item.image
      });
    },
    CollectCurrentChange(e) {
      this.collectPage.pageNo = e;
      this.getMoreData();
    },
    leibieClick(num) {
      this.leibie = num;
      this.collectPage.pageNo = 1;
      this.checkLogin(false, this.getMoreData);
    },
    getMoreData() {
      if (this.collectPage.userId == "")
        this.collectPage.userId = JSON.parse(
          localStorage.getItem("userInfo")
        ).id;

      this.list = [];
      if (this.leibie == 1) {
        this.getReportMyRecord();
      } else if (this.leibie == 2) {
        this.getMyReportRecord();
      }
    },
    getMyReportRecord() {
      this.$getHttp("/mob/user/getMyReportRecord", this.collectPage).then(
        data => {
          if (data.code == 200) {
            data.page.list.forEach(el => {
              if (el.image) {
                el.image = el.image.split("|");
              }
            });
            this.list = data.page.list;
            this.collectTotal = data.page.count;
            this.withdrawLoading = false;
          }
        }
      );
    },
    getReportMyRecord() {
      this.$getHttp("/mob/user/getReportMyRecord", this.collectPage).then(
        data => {
          if (data.code == 200) {
            data.page.list.forEach(el => {
              if (el.image) {
                el.image = el.image.split("|");
              }
            });
            this.list = data.page.list;
            this.collectTotal = data.page.count;
            this.withdrawLoading = false;
          }
        }
      );
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
      } else {
        this.loginstate = false;
      }
    },
    checkLogin(slience = false, callback) {
      if (!this.loginstate) {
        if (!slience) {
          this.$message({
            message: "请先登录！",
            type: "error",
            offset: 120,
            duration: 2000
          });
        }
        return false;
      }
      callback && callback();
      return true;
    }
  }
};
</script>
<style lang="less" scoped>
.report-img-wrap {
  display: inline-block;
  vertical-align: middle;
}
.report-img {
  object-fit: contain;
  vertical-align: middle;
  margin-right: 10px;
}
.jiedao {
  margin-bottom: 16rpx;
  /* font-size: 32rpx; */
  line-height: 45rpx;
}

.jiedao:last-child {
  margin-bottom: 0;
}

.box {
  position: relative;
  padding-bottom: 200px;
}
.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;
  border: 1px solid #e0e0e0;
  .leibie {
    height: 80px;
    border-bottom: 1px solid #e0e0e0;
    padding-left: 40px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .anniu {
      div {
        display: inline-block;
        margin-right: 54px;
        font-size: 20px;
        cursor: pointer;
      }
      .xuan {
        transform: scale(1.2);
        color: #64b6a8;
      }
    }
  }
  .fenye {
    width: 100%;
    height: 50px;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 50px;
  }
}
.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;
  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }
    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }
    .list {
      position: relative;
      width: 100%;
      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }
      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }
    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}
.report {
  display: flex;
  flex-direction: column;
  .report_itemse {
    width: 100%;
    box-sizing: border-box;
    height: 200px;
    padding: 25px 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 10px solid #f2f2f2;
  }
  .report_item {
    width: 100%;
    // height: 200px;
    box-sizing: border-box;
    padding: 25px 35px;
    // display: flex;
    // justify-content: space-between;

    align-items: flex-start;
    border-bottom: 10px solid #f2f2f2;
    .report_item_left {
      flex: 4;
      display: flex;
      flex-direction: column;
      div {
        margin-bottom: 12px;
      }
    }
    .withdraw {
      flex: 1;
      position: absolute;

      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      .withdraw_item {
        width: 120px;
        height: 42px;
        border: 1px solid #64b6a8;
        border-radius: 20px;
        font-size: 19px;
        font-weight: 400;
        color: #64b6a8;
        text-align: center;
        line-height: 42px;
        cursor: pointer;
        margin: 0 auto;
      }
    }
  }
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #64b6a8 !important;
}
</style>
